<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>自定义指令</h3>
        <!-- 
            自定义指令
            自己命令 自己添加操作DOM元素逻辑

            需求：
            1.定义一个v-big指令，和v-text功能类似 但会把绑定的数值放大10倍
            2.定义一个v-fbind指令 和v-bind功能类似 但可以让其所绑定的input元素默认获取焦点

         -->
         <h3>当前n的值为 <span v-text="n"></span></h3>
         <h3>当前n * 10的值为 <span v-big="n"></span></h3>
         <button @click="n++">n加1</button>
         <input type="text" v-fbind="n">
    </div>
    <script src="../vuejs/vue.js"></script>
    <script>
        const vm = new Vue({
            el : '#app',
            data() {
                return {
                    n : 1
                }
            },
            directives : {
                // big 函数何时会被调用，
                // 1.指令与元素成功绑定时调用
                // 2.指令所在模板重新解析时 会调用
                big(element,binding){
                    // 不写返回值
                    element.innerText = binding.value * 10
                },
                // 简写模式
                // fbind(element,binding){
                //     element.value = binding.value
                //     /*
                //         在页面加载后不会出现获取焦点
                //         而是在后续重新解析模板后获取
                //         因为初次绑定调用这个方法 之后 才会把元素放到页面里
                //         在元素未放到页面里时获取焦点是做不到的
                //     */ 
                //     element.focus()
                // }
                // 完整模式 提供不同阶段的函数

                // !!! 指令回调函数里出现的this 都是指window 不是vm
                // 指令名：回调函数
                // 指令名使用时 加v- 定义时不加v-
                fbind : {
                    // 初次绑定元素与数据时执行
                    bind(element,binding){
                        element.value = binding.value
                    },
                    // 将元素插入页面后执行
                    inserted(element,binding){
                        element.focus()
                    },
                    // 重新解析模板后执行
                    update(element,binding){
                        element.value = binding.value
                    }
                }
            }
        })
        // 全局自定义指令
        Vue.directive("fbind",{
                    // 初次绑定元素与数据时执行
                    bind(element,binding){
                        element.value = binding.value
                    },
                    // 将元素插入页面后执行
                    inserted(element,binding){
                        element.focus()
                    },
                    // 重新解析模板后执行
                    update(element,binding){
                        element.value = binding.value
                    }
                })
    </script>
</body>
</html>